<template>
	<div class="row-item">
		<div class="title">
			<span>{{props.label}}</span>
		</div>
		<div class="vector-2d">
			<el-input-number v-model="x" class="ibox" size="small" controls-position="right"
				:min="props.min"
				:max="props.max"
				:step="props.step" @change="onchange">
			</el-input-number>
		  <el-input-number v-model="y" class="ibox" size="small" controls-position="right"
		  	:min="props.min"
		  	:max="props.max"
		  	:step="props.step" @change="onchange">
		  </el-input-number>
		</div>
	</div>
</template>


<script lang="ts" setup>
	const props=defineProps({
	  label:String,
	  pidentifier:String,
	  identifier:String,
	  value:String,
	  required:Boolean,
	  min:Number,
	  max:Number,
	  step:Number
	})
	
	const required=ref(false);
	const x=ref<number>(0);
	const y=ref<number>(0);
	
	watch(props,() => {
			parse(props.value);
		},
	    { immediate: true, deep: true },
	)


	function parse(v3:any) {
		if(v3){
			let v3r=v3.split(',');
			if(v3r && v3r.length>0){
				x.value=parseFloat(parseFloat(v3r[0]).toFixed(8));
			}
			if(v3r && v3r.length>1){
				y.value=parseFloat(parseFloat(v3r[1]).toFixed(8));
			}
		}else{
			x.value=0;y.value=0;
		}
	}
	
	const emits = defineEmits(['onchange'])
	const onchange=()=>{
		emits('onchange',{
			pidentifier:props.pidentifier,
			identifier:props.identifier,
			value:x.value+','+y.value
		})
	}
	defineExpose({
	});
</script>

<style scoped>
	:deep(.el-input-number__decrease) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	:deep(.el-input-number__increase) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
</style>